<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="auto">
                <nav-side :collapse="collapse"></nav-side>
            </el-aside>
            <el-container>
                <el-header>
                    <nav-header v-model:collapse="collapse"></nav-header>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
    import NavSide from '@/components/container/navSide/index.vue'
    import NavHeader from '@/components/container/navHeader/index.vue'
    defineOptions({
        name: 'Container'
    })
    // console.log(NavSide)
    // 伸缩导航
    let collapse = ref(false)
    // watch(collapse, (newValue, oldValue) => {
    //     console.log('值发生了变更', newValue, oldValue);
    // });
</script>

<style lang="scss">
    .common-layout, .el-menu{
        height: 100%;
    }
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
    }
    .el-header {
        padding: 0;
        border-bottom: 1px solid #eeeeee;
    }
</style>

